<template>
	<view class="">
		<view class="w-1 absolute-0 tbg"></view>
		<view class="sticky w-1 o-h">
			<view class="w-1 absolute-0 tbg"></view>
			<up-navbar placeholder bgColor="transparent" title="个人中心" leftIconSize="0" :autoBack="false">
				<template #center>
					<view class="status fr-c">
						<view class="online circle"></view>
						<text class="c-ff m-l-15 m-r-10 fs-28">接单中</text>
						<up-icon name="arrow-down" color="#ffffff"></up-icon>
					</view>
				</template>
			</up-navbar>
		</view>
		<view class="w-1 relative fl-s-c p-r-30" style="padding-top: 20rpx;">
			<view class="ubox fr-s-c w-1" style="padding: 28rpx 22rpx;">
				<image :src="$dimg(user.avatar) || '/static/logo.png'" class="circle"
					style="width: 148rpx; height: 148rpx;" mode="aspectFill">
				</image>
				<view class="flex-1 fl-a-s m-l-20" style="height: 148rpx;">
					<view class="w-1 fr-b-c">
						<text class="c-33 fs-32 bold">{{user.nickname}}</text>
						<image @click="uplocation" style="width: 39rpx; height: 39rpx;"
							src="/static/images/tab1/refresh.png" mode=""></image>
					</view>
					<view class="w-1 fr-s-c">
						<text class="c-77 fs-24">更新位置：</text>
						<text
							class="fs-24 c-33 text-line-1 bold">{{location.province+location.city+location.district+location.street+location.streetNum || '--'}}</text>
					</view>
					<view class="w-1 fr-s-c">
						<text class="c-77 fs-24">更新时间：</text>
						<text class="fs-24 c-33 bold" v-if="time">{{$u.timeFormat(time,'yyyy-mm-dd hh:MM:ss')}}</text>
						<text class="fs-24 c-33 bold" v-else>--</text>
					</view>
				</view>
			</view>

			<view class="w-1 br-20 bg-ff m-t-20" style="padding: 22rpx;">
				<view class="w-1 fr-b-c" @click="$to('/pagemaster/pages/index/DataStatistics')">
					<image style="width: 40rpx; height: 40rpx;" src="/static/images/tab1/data.png" mode=""></image>
					<text class="c-00 fs-28 bold flex-1 m-l-15">数据统计</text>
					<image style="width: 35rpx; height: 35rpx;" src="/static/images/tab1/right.png" mode=""></image>
				</view>
				<view class="w-1 fr-s-s m-t-30">
					<view class="fl-c" style="width: 25%;">
						<text class="c-00 fs-36 bold">{{all.ordernum}}</text>
						<text class="m-t-5 c-77 fs-24">接单量</text>
					</view>
					<view class="fl-c" style="width: 25%;">
						<text class="c-00 fs-36 bold">{{(all.sucblv).toFixed(1)}}%</text>
						<text class="m-t-5 c-77 fs-24">成功率</text>
					</view>
					<view class="fl-c" style="width: 25%;">
						<text class="c-00 fs-36 bold">{{(all.closeblv).toFixed(1)}}%</text>
						<text class="m-t-5 c-77 fs-24">上门率</text>
					</view>
					<view class="fl-c" style="width: 25%;">
						<price size1="24rpx" size2="36rpx" size3="24rpx" :price="all.incomemoney"></price>
						<text class="m-t-5 c-77 fs-24">收益</text>
					</view>
				</view>
			</view>

			<view class="w-1 br-20 bg-ff m-t-20" style="padding: 22rpx;">
				<view class="w-1 fr-b-c">
					<image style="width: 40rpx; height: 40rpx;" src="/static/images/tab1/data.png" mode=""></image>
					<text class="c-00 fs-28 bold flex-1 m-l-15">今日数据</text>
					<!-- <image style="width: 35rpx; height: 35rpx;" src="/static/images/tab1/right.png" mode=""></image> -->
				</view>
				<view class="w-1 fr-s-s m-t-30">
					<view class="fl-c" style="width: 25%;">
						<text class="c-00 fs-36 bold">{{today.ordernum}}</text>
						<text class="m-t-5 c-77 fs-24">接单量</text>
					</view>
					<view class="fl-c" style="width: 25%;">
						<text class="c-00 fs-36 bold">{{(today.sucblv).toFixed(1)}}%</text>
						<text class="m-t-5 c-77 fs-24">成功率</text>
					</view>
					<view class="fl-c" style="width: 25%;">
						<text class="c-00 fs-36 bold">{{(today.closeblv).toFixed(1)}}%</text>
						<text class="m-t-5 c-77 fs-24">上门率</text>
					</view>
					<view class="fl-c" style="width: 25%;">
						<price size1="24rpx" size2="36rpx" size3="24rpx" :price="today.incomemoney"></price>
						<text class="m-t-5 c-77 fs-24">收益</text>
					</view>
				</view>
			</view>
			<view class="w-1 m-t-20 m-b-20">
				<up-tabs lineColor="#01796D" :activeStyle="activeStyle" :inactiveStyle="inactiveStyle" :current="curtab"
					:list="tabs" :scrollable="true" @click="clickTab">
				</up-tabs>
			</view>

			<view class="w-1 bg-ff br-20 m-b-30 relative" @click="todetail(item)" v-for="(item,index) in list"
				:key="index">
				<view class="rlabel absolute rbg1" v-if="item.state==10" style="right: 0; top: 0;">{{obj[item.state]}}
				</view>
				<view class="rlabel absolute rbg2" v-if="item.state==11" style="right: 0; top: 0;">{{obj[item.state]}}
				</view>
				<view class="rlabel absolute rbg3" v-if="item.state==12 && !item.materpaytime"
					style="right: 0; top: 0;">{{obj[item.state]}}</view>
				<view class="rlabel absolute rbg4" v-if="item.state==12 && item.materpaytime" style="right: 0; top: 0;">
					已缴费</view>
				<view class="rlabel absolute rbg4" v-if="item.state==2" style="right: 0; top: 0;">{{obj[item.state]}}
				</view>
				<view class="w-1 p-30 fl-s-s">
					<view class="w-1 fr-b-c">
						<text class="c-33 fs-28 bold">{{item.title}}</text>
						<!-- <text class="c-price fs-28">{{obj[item.state]}}</text> -->
					</view>
					<view class="fr-s-c w-1 m-t-20">
						<text class="flex-1 c-77 fs-24  text-line-2">规格名称：{{item.sku || '默认'}}</text>
					</view>
					<view class="fr-s-c m-t-20">
						<text class=" c-77 fs-24">期望上门时间：</text>
						<text class=" c-33 bold fs-24">{{item.reservtime}}</text>
					</view>
					<view class="fr-s-c m-t-20">
						<text class=" c-77 fs-24">服务地址：</text>
						<text
							class=" c-33 bold fs-24">{{item.residevice+item.residecity+item.residedist+item.address}}</text>
					</view>
					<view class="w-1 fr-s-c m-t-10" v-if="item.state==0 && item.jit_time>0">
						<text class="c-main fs-28">剩余支付时间：</text>
						<up-count-down :time="item.jit_time*1000" format="HH:mm:ss"></up-count-down>
					</view>
					<view class="m-t-30 w-1 bb-solid"></view>
					<view class="w-1 fr-e-c m-t-25 warp">
						<view class="btn3 fr-c m-l-20" @click.stop="call(item.mobile)">联系预约人</view>
						<view class="btn3 fr-c m-l-20" v-if="item.state==10 && !item.materpaytime"
							@click.stop="$to('/pagemaster/pages/index/ChooseCancenReason?id='+item.id)">取消接单</view>
						<view class="btn1 fr-c m-l-20" v-if="item.state==12 && item.materpaytime"
							@click.stop="$to('/pagemaster/pages/index/ServiceCompleted?id='+item.id)">完成</view>
						<view class="btn1 fr-c m-l-20"
							@click.stop="$to('/pagemaster/pages/index/SignInArrival?id='+item.id+'&sn='+item.ordersn)"
							v-if="item.state==10">到达</view>
						<view class="btn1 fr-c m-l-20" v-if="item.state==11"
							@click.stop="$u.route('/pagemaster/pages/index/Quotation1?id='+item.id)">报价</view>
						<view class="btn3 fr-c m-l-20" v-if="item.state==2 && item.pj_text"
							@click.stop="$u.route('/pages/pj1/pj1?id='+item.id)">查看评价</view>
						<view class="btn3 fr-c m-l-20" style="background-color: #eeeeee;"
							v-if="item.state==2 && !item.pj_text">用户未评价</view>
						<!-- <view class="btn1 fr-c m-l-20" v-if="item.state==11" @click.stop="">完成</view> -->
					</view>
				</view>
			</view>


			<view class="w-1 p-t-150" v-if="nodata">
				<up-empty :icon="$icon"></up-empty>
			</view>

		</view>
	</view>
</template>

<script setup>
	import {
		onMounted,
		onUnmounted
	} from 'vue';

	const user = ref('')
	const location = ref('')
	const time = ref('')
	// onLoad(()=>{
	// 	console.log('loadloadloadloadloadloadloadload')
	// 	user.value = uni.getStorageSync('user');
	// 	getlist()
	// 	uni.$on('reorder',()=>reget(false))
	// })


	onShow(() => {
		page.value = 1;
		console.log('ononononononononononononononon')
		user.value = uni.getStorageSync('user');
		getlist()
		uni.$on('reorder', () => reget(false))
	})

	// onUnmounted(()=>{
	// 	console.log('卸载了')
	// })

	onUnload(() => {
		uni.$off('reorder')
	})
	onShow(() => {
		getuser()
		getdata1()
		getdata2()
	})

	onPullDownRefresh(() => {
		getuser()
		getdata1()
		getdata2()
		reget()
	})
	onReachBottom(() => {
		if (loadmore.value) {
			page.value++;
			getlist()
		}
	})

	function todetail(item) {
		uni.navigateTo({
			url: '/pagemaster/pages/Order/Detail?sn=' + item.ordersn
		})
	}

	function call(val) {
		uni.makePhoneCall({
			phoneNumber: String(val)
		})
	}

	async function uplocation() {
		uni.showLoading({
			title: '更新中'
		})
		const res = await getApp().getlocation(true);
		time.value = uni.getStorageSync('last') || ''
		location.value = res;
		getApp().tt('更新成功', 'success')
	}

	function getuser() {
		if (!uni.getStorageSync('user')) return;
		uni.$post({
			url: '/api/User/Userinfo',
			// url:'/api/User/getmybasic',
			loading: false
		}).then(res => {
			user.value = res.data;
			let token = uni.getStorageSync('user').token
			user.value.token = token;
			uni.setStorageSync('user', user.value)
		})
	}

	// 所有的数据统计
	const all = ref('')

	function getdata1() {
		uni.$post({
			url: '/api/User/Materdatatistics',
			data: {
				type: 5
			},
			loading: false
		}).then(res => {
			all.value = res.data;
		})
	}
	// 今天的数据统计
	const today = ref('')

	function getdata2() {
		uni.$post({
			url: '/api/User/Materdatatistics',
			data: {
				type: 1
			},
			loading: false
		}).then(res => {
			today.value = res.data;
		})
	}



	// 0=待付款,1=已支付,2=已完成,3=取消支付,4=已发货,5=待评价,10=已接单,11=进行中,12=报价缴费中,13=完成待确认',
	const tabs = ref([
		// {
		// 	name: '全部',
		// 	val: -1
		// },
		{
			name: '已接单',
			val: 10
		},
		{
			name: '服务中',
			val: 11
		}, {
			name: '待缴费',
			val: 12
		}, {
			name: '待客户确认',
			val: 13
		},
		{
			name: '已完成',
			val: 2
		}
	]);
	const activeStyle = {
		'font-weight': 800,
		'font-size': '32rpx',
		color: '#01796D'
	}
	const inactiveStyle = {
		'font-weight': 400,
		'font-size': '30rpx',
		color: '#333333'
	}


	const curtab = ref(0)

	function clickTab(e) {
		curtab.value = e.index;
		reget(true)
	}

	const obj = {
		0: '待付款',
		1: '待接单',
		2: '已完成',
		3: '已关闭',
		4: '已发货',
		5: '待评价',
		6: '售后中',
		7: '售后成功',
		8: '退换货',
		9: '拒绝售后',
		10: '已接单',
		11: '服务中',
		12: '待缴费',
		13: '待客户确认',
	}

	const page = ref(1);
	const list = ref([]);
	const nodata = ref(false);
	const loadmore = ref(true);

	function getlist(loading = true) {
		uni.$get({
			url: '/api/Ordersystem/Takingorders',
			data: {
				page: page.value,
				type: tabs.value[curtab.value].val,
				// lat:location.value.lat,
				// lng:location.value.lng
			},
			loading
		}).then(res => {
			if (page.value == 1) list.value = [];
			list.value = [...list.value, ...res.data];
			nodata.value = !list.value.length;
			loadmore.value = res.data.length;
		}).catch(err => {
			list.value = [];
			nodata.value = !list.value.length;
			loadmore.value = true;
		})
	}


	function reget(loading = false) {
		page.value = 1;
		getlist(loading)
	}
</script>

<style>
	page {
		background: #f1f5f6;
	}

	.tbg {
		height: 316rpx;
		background: linear-gradient(to right, #01796D, #58C0AA);
	}

	.status {
		min-width: 204rpx;
		padding: 0 20rpx;
		height: 64rpx;
		background: rgba(255, 255, 255, 0.38);
		border-radius: 38rpx 38rpx 38rpx 38rpx;
	}

	.online {
		width: 24rpx;
		height: 24rpx;
		background: #60FF9A;
	}

	.ubox {
		background: #FFFFFF;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
	}

	.btn1 {
		min-width: 170rpx;
		padding: 0 15rpx;
		height: 60rpx;
		border-radius: 12rpx;
		text-align: center;
		color: #ffffff;
		background: #01796d;
		font-size: 28rpx;
	}

	.btn2 {
		min-width: 170rpx;
		padding: 0 15rpx;
		height: 60rpx;
		border-radius: 12rpx;
		text-align: center;
		color: #ffffff;
		background: #ff6251;
		font-size: 28rpx;
	}

	.btn3 {
		min-width: 170rpx;
		padding: 0 15rpx;
		text-align: center;
		color: #505050;
		height: 60rpx;
		background: #FFFFFF;
		border-radius: 12rpx;
		border: 2rpx solid #E5E5E5;
		font-size: 28rpx;
	}

	.btn4 {
		font-size: 28rpx;
		min-width: 170rpx;
		padding: 0 15rpx;
		height: 64rpx;
		border-radius: 12rpx;
		text-align: center;
		color: #ffffff;
		background: #fe9203;
		font-weight: bold;
	}


	.rlabel {
		min-width: 96rpx;
		padding: 0 15rpx;
		height: 44rpx;
		border-radius: 0 20rpx 0 20rpx;
		line-height: 44rpx;
		font-size: 24rpx;
		color: #FFFFFF;
		text-align: center;
	}

	.rbg1 {
		background: #319a42;
	}

	.rbg2 {
		background: #ffbb00;
	}

	.rbg3 {
		background: #ff5c55;
	}

	.rbg4 {
		background: #99d0c7;
	}

	.rbg5 {
		background: #cfcfcf;
	}
</style>